<template>
  <div class="data-analy-box">
    <div style="width: 100%; max-height: 180px">
      <div
        style="height: 180px; overflow: hidden"
        v-if="echartsData && echartsData.length > 0"
      >
        <ak-echart :option="ratioOpt" :repaint="true" />
      </div>
      <div v-else style="text-align: center">
        <span class="el-table__empty-text">暂无数据</span>
      </div>
    </div>
  </div>
</template>

<script>
import mixDistrict from './mix'
import AkEchart from '@/components/gisPageComponents/echarts'

import { mapState, createNamespacedHelpers } from 'vuex'
const { mapState: mapStateForm, mapMutations: mapMutationsForm } =
  createNamespacedHelpers('gisForm')

export default {
  name: 'DataAnalysisEcharts',
  mixins: [mixDistrict],
  components: { AkEchart },

  data: () => ({
    currentType: '1'
  }),
  created() {
    this.initJudgeEcharts()
  },

  computed: {
    ...mapState(['gisForm']),
    ...mapStateForm([
      'ptMonth',
      'panelType',
      'panelCellType',
      'echartsData',
      'userType'
    ])
  },
  watch: {
    echartsData(nv) {
      if (nv && nv.length > 0) {
        this.initJudgeEcharts()
      }
    },
    panelType(nv) {
      let currentType = this.currentType
      if (parseInt(nv) == parseInt(currentType) && nv != currentType) {
        this.initJudgeEcharts()
      }
    }
  },
  methods: {
    initJudgeEcharts() {
      let echartsData = this.echartsData
      let panelType = this.panelType
      let panelCellType = this.panelCellType
      let ptMonth = this.ptMonth
      let userType = this.userType
      this.currentType = panelType
      console.log(echartsData, 'echartsData')
      if (echartsData && echartsData.length > 0) {
        if (panelType == '1b' || panelType == '2b') {
          this.initRatioTrend(
            echartsData,
            parseInt(panelType),
            panelCellType,
            'line'
          )
        } else if (userType > 3 && panelType == 1) {
          let [obj] = echartsData
          let mobile = obj.mobileUserRatio
            ? Number(obj.mobileUserRatio.replace('%', ''))
            : null
          let unicom = obj.unicomUserRatio
            ? Number(obj.unicomUserRatio.replace('%', ''))
            : null
          let telecom = obj.telecomUserRatio
            ? Number(obj.telecomUserRatio.replace('%', ''))
            : null

          let arr =
            mobile === null && unicom === null && telecom === null
              ? null
              : [mobile, unicom, telecom]
          console.log(arr)
          this.initRatioTrend(arr, panelType, panelCellType, 'bar')
        } else {
          let obj = echartsData.filter(v => {
            return v.ptMonth == ptMonth
          })[0]
          let mobile = null,
            unicom = null,
            telecom = null
          if (obj) {
            mobile = obj.mobileRatio
              ? Number(obj.mobileRatio.replace('%', ''))
              : null
            unicom = obj.unicomRatio
              ? Number(obj.unicomRatio.replace('%', ''))
              : null
            telecom = obj.telecomRatio
              ? Number(obj.telecomRatio.replace('%', ''))
              : null
          }

          let arr =
            mobile === null && unicom === null && telecom === null
              ? null
              : [mobile, unicom, telecom]
          console.log(arr)

          this.initRatioTrend(arr, panelType, panelCellType, 'bar')
        }
      }
    }
  }
}
</script>
